<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

    <!--toastr-->
    <link href="../css/plugins/toastr/toastr.min.css" rel="stylesheet"/>

    <!--拖拽-->
    <link rel="stylesheet" href="../css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css">

    <!-- ztree -->
    <link rel="stylesheet" href="../css/plugins/zTree/zTreeStyle/zTreeStyle.css" type="text/css">

    <!--common.css-->
    <link href="../css/common.css" rel="stylesheet" type="text/css">

    <!--自定义css-->
    <link href="modify_flow.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="wrapper wrapper-content content-margin">

    <div class="col-lg-4 flow-and-task">
        <div class="col-lg-12 flow-def-info">
            <div class="panel panel-default">
                <div class="panel-heading">流程信息</div>
                <div class="panel-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">流程名称</label>
                            <div class="col-sm-9">
                                <input name="flowDefName" type="text" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">流程描述</label>
                            <div class="col-sm-9">
                                <input name="flowDefDes" type="text" class="form-control" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-12 task-explain">
            <div class="panel panel-default">
                <div class="panel-heading">节点类型</div>
                <div class="panel-body">
                    <div class="row task" taskType="task">
                        <div class="col-lg-4">
                            <div class="btn btn-primary draggable">普通任务</div>
                        </div>
                        <div class="col-lg-8 task-des">
                            普通任务，只能指定一个人办理。
                        </div>
                    </div>
                    <div class="row task" taskType="andTask">
                        <div class="col-lg-4">
                            <div class="btn btn-primary draggable">并型任务</div>
                        </div>
                        <div class="col-lg-8 task-des">
                            并型任务，可以指定一个或多个办理人，所有人都需要办理任务才能完成，所有人都审批通过该任务才算通过。
                        </div>
                    </div>
                    <div class="row task" taskType="orTask">
                        <div class="col-lg-4">
                            <div class="btn btn-primary draggable">或型任务</div>
                        </div>
                        <div class="col-lg-8 task-des">
                            或型任务，可以指定一个或多个办理人，只需要一个人办理任务就能完成。
                        </div>
                    </div>
                    <div class="row task" style="margin-bottom: 0px" taskType="pointTask">
                        <div class="col-lg-4">
                            <div class="btn btn-primary draggable">指定型任务</div>
                        </div>
                        <div class="col-lg-8 task-des">
                            指定型任务，流程发起人指定，即任务的办理人需要由流程发起人指定，指给谁就由谁来办理。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="col-lg-8 flow-edit">
        <div class="panel panel-default flow">
            <div class="panel-heading">流程编辑区</div>
            <div class="panel-body">

                <div class="row task" taskType="start">
                    <div class="col-lg-2 task-node">
                        <div class="btn btn-primary">开始</div>
                        <div class="line-arrow" style="height: 50px;"></div>
                    </div>
                </div>


                <div class="row task" taskType="end">
                    <div class="col-lg-2 task-node">
                        <div class="btn btn-primary">结束</div>
                    </div>
                </div>

                <div class="row save">
                    <button class="btn btn-w-m btn-success">保存</button>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 办理人 -->
<div class="modal fade assignee" id="assignee" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">办理人</h4>
            </div>
            <div class="modal-body">
                <div class="content_wrap">
                    <div class="search">
                        <form class="form-inline">
                            <div class="form-group">
                                <input type="text" class="form-control"/>
                            </div>
                            <button class="btn btn-primary">搜索</button>
                        </form>
                    </div>

                    <ul id="assigneeTree" class="ztree"></ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="select">选择</button>
            </div>
        </div>
    </div>
</div>

<!-- 节点模版 -->
<div id="taskTemplate">
    <div class="row task" taskType="task">
        <div class="col-lg-2 task-node">
            <div class="btn btn-primary">普通任务</div>
            <div class="line-arrow"></div>
        </div>
        <div class="col-lg-10 task-property">
            <form class="form-horizontal">
                <div class="form-group"><a class="col-sm-2 control-label remove"
                                           href="javascript:void(0)">移除任务</a>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务名称</label>
                    <div class="col-sm-10">
                        <input name="name" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务描述</label>
                    <div class="col-sm-10">
                        <input name="des" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务办理人</label>
                    <div class="col-sm-10">
                        <input name="assignees" readonly="readonly" type="text"
                               class="form-control" />
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row task" taskType="andTask">
        <div class="col-lg-2 task-node">
            <div class="btn btn-primary">并型任务</div>
            <div class="line-arrow"></div>
        </div>
        <div class="col-lg-10 task-property">
            <form class="form-horizontal">
                <div class="form-group"><a class="col-sm-2 control-label remove"
                                           href="javascript:void(0)">移除任务</a>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务名称</label>
                    <div class="col-sm-10">
                        <input name="name" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务描述</label>
                    <div class="col-sm-10">
                        <input name="des" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务办理人</label>
                    <div class="col-sm-10">
                        <input name="assignees" readonly="readonly" type="text"
                               class="form-control" />
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row task" taskType="orTask">
        <div class="col-lg-2 task-node">
            <div class="btn btn-primary">或型任务</div>
            <div class="line-arrow"></div>
        </div>
        <div class="col-lg-10 task-property">
            <form class="form-horizontal">
                <div class="form-group"><a class="col-sm-2 control-label remove"
                                           href="javascript:void(0)">移除任务</a>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务名称</label>
                    <div class="col-sm-10">
                        <input name="name" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务描述</label>
                    <div class="col-sm-10">
                        <input name="des" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务办理人</label>
                    <div class="col-sm-10">
                        <input name="assignees" readonly="readonly" type="text"
                               class="form-control" />
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row task" taskType="pointTask">
        <div class="col-lg-2 task-node">
            <div class="btn btn-primary">指定型任务</div>
            <div class="line-arrow" style="height: 100px;"></div>
        </div>
        <div class="col-lg-10 task-property">
            <form class="form-horizontal">
                <div class="form-group"><a class="col-sm-2 control-label remove"
                                           href="javascript:void(0)">移除任务</a>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务名称</label>
                    <div class="col-sm-10">
                        <input name="name" type="text" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">任务描述</label>
                    <div class="col-sm-10">
                        <input name="des" type="text" class="form-control" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>

<!--toastr-->
<script src="../js/plugins/toastr/toastr.min.js"></script>

<!--拖拽-->
<script src="../js/plugins/jquery-ui/jquery-ui.min.js"></script>

<!-- zTree -->
<script type="text/javascript" src="../js/plugins/zTree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../js/plugins/zTree/jquery.ztree.excheck.js"></script>

<!--common.js-->
<script src="../js/common.js"></script>

<!-- 自定义js -->
<script src="modify_flow.js"></script>

</body>

</html>
